<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>小元智能问答机器人</title>
    <style type="text/css">
        .box{
            width:800px;
            height:600px;
            border:1px solid blue;
            margin:0 auto;
            margin-top:100px;
        }
        .inTer{
            width:780px;
            height:480px;
            border:1px solid deeppink;
            margin:0 auto;
            margin-top:10px;
            overflow-y:auto;
        }
        textarea{
            display:block;
            width: 776px;
            height:65px;
            margin:0 auto;
            margin-top:5px;
        }
        #btn{
            display:block;
            float:right;
            margin-right:10px;
            margin-top:5px;
        }
        p{
            display:inline-block;
            border-radius:5px;
            background: #f6f4f4;
            font-size:12px;
            padding:5px 5px;
            margin:5px 0;
            margin-left:5px;
            max-width:140px;
            word-wrap: break-word;
        }
        body{
            background-image: url("https://scpic.chinaz.net/files/pic/pic9/201902/zzpic16720.jpg");
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inTer" id="father">
        <p>你好,我是小元</p ></br>
    </div>
    <textarea style="resize: none;" id="txt">
			</textarea>
    <input type="button" id="btn" value="发送" />
</div>
</body>
</html>

<script>
    window.onload=function (){
        var txt1 = document.getElementById("txt");
        txt1.value=""
    }
    var btn = document.getElementById("btn");
    var txt = document.getElementById("txt");
    var father = document.getElementById("father")
    var p = document.getElementsByTagName("p");

    //按钮
    btn.onclick=function(){
        if(txt.value==""){
            alert("请勿发送空内容");
        }
        else if(txt.value ==="你好" || txt.value==="您好"){
            //创建对话框
            var son4 = document.createElement("p");
            son4.style.backgroundColor="yellowgreen";
            son4.style.clear="both";
            son4.style.float="right";
            son4.style.marginRight="5px";
            son4.innerText=txt.value;
            father.appendChild(son4);
            son4.scrollIntoView();


            //创建回答对话框
            var son3 = document.createElement("p");
            son3.style.backgroundColor="#f3f3f3";
            son3.style.clear="both";
            son3.style.float="left";
            son3.style.marginRight="5px";
            son3.innerText="你好,有什么能够帮助您的吗？";
            father.appendChild(son3);
            son3.scrollIntoView();

            txt.value=""
        }
        else if(txt.value ==="再见" || txt.value==="拜拜" || txt.value==="告辞"){
            //创建对话框
            var son4 = document.createElement("p");
            son4.style.backgroundColor="yellowgreen";
            son4.style.clear="both";
            son4.style.float="right";
            son4.style.marginRight="5px";
            son4.innerText=txt.value;
            father.appendChild(son4);
            son4.scrollIntoView();



            //创建回答对话框
            var son3 = document.createElement("p");
            son3.style.backgroundColor="#f3f3f3";
            son3.style.clear="both";
            son3.style.float="left";
            son3.style.marginRight="5px";
            son3.innerText="感谢您的使用，拜拜~";
            father.appendChild(son3);
            son3.scrollIntoView();

            txt.value=""
        }
        else{
            var son = document.createElement("p");
            son.style.backgroundColor="yellowgreen";
            son.style.clear="both";
            son.style.float="right";
            son.style.marginRight="5px";
            son.innerText=txt.value;
            father.appendChild(son);
          //  txt.value="";
            son.scrollIntoView();

            var xmlHttp = null;
            try {
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                try {
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
            }

            //post
            xmlHttp.open('POST','http://localhost:8080/demotest',true)
            xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            var data = 'question='+txt.value
            console.log(txt.value)
            xmlHttp.send(data)

            //获取后端响应数据
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState === 4&&xmlHttp.status ===200){ //请求成功
                    //接收后端发过来的问题答案
                    console.log(xmlHttp.responseText)
                    //提问框清空
                    txt.value = ""

                    //创建回答对话框
                    var son2 = document.createElement("p");
                    son2.style.backgroundColor="#f3f3f3";
                    son2.style.clear="both";
                    son2.style.float="left";
                    son2.style.marginRight="5px";
                    son2.innerText=xmlHttp.responseText;
                    father.appendChild(son2);
                    son.scrollIntoView();
                }
                if(xmlHttp.status !==200){ //请求失败
                    var son2 = document.createElement("p");
                    son2.style.backgroundColor="#f3f3f3";
                    son2.style.clear="both";
                    son2.style.float="left";
                    son2.style.marginRight="5px";
                    son2.innerText="服务器开了点小差，小元正在修复~";
                    father.appendChild(son2);
                    son.scrollIntoView();
                }
            }
        }

    }

    //回车
    document.onkeydown=function(evt){
        var e = evt || event;
        e.keyCode=e.which=e.charCode;
        if(e.keyCode==13 || e.keyCode==10){
            if(txt.value==""){ //前端判断输入内容是否为空
                alert("请勿发送空内容");
            }
            else if(txt.value ==="你好" || txt.value==="您好"){
                //创建对话框
                var son4 = document.createElement("p");
                son4.style.backgroundColor="yellowgreen";
                son4.style.clear="both";
                son4.style.float="right";
                son4.style.marginRight="5px";
                son4.innerText=txt.value;
                father.appendChild(son4);
                son4.scrollIntoView();



                //创建回答对话框
                var son3 = document.createElement("p");
                son3.style.backgroundColor="#f3f3f3";
                son3.style.clear="both";
                son3.style.float="left";
                son3.style.marginRight="5px";
                son3.innerText="你好,请问有什么能够帮助您的吗？";
                father.appendChild(son3);
                son3.scrollIntoView();

                txt.value=""
            }
           else if(txt.value ==="再见" || txt.value==="拜拜" || txt.value==="告辞"){
                //创建对话框
                var son4 = document.createElement("p");
                son4.style.backgroundColor="yellowgreen";
                son4.style.clear="both";
                son4.style.float="right";
                son4.style.marginRight="5px";
                son4.innerText=txt.value;
                father.appendChild(son4);
                son4.scrollIntoView();



                //创建回答对话框
                var son3 = document.createElement("p");
                son3.style.backgroundColor="#f3f3f3";
                son3.style.clear="both";
                son3.style.float="left";
                son3.style.marginRight="5px";
                son3.innerText="感谢您的使用，拜拜~";
                father.appendChild(son3);
                son3.scrollIntoView();

                txt.value=""
            }
            else{  //不为空则发送请求至后端

                //创建提问对话框
                var son = document.createElement("p");
                son.style.backgroundColor="yellowgreen";
                son.style.clear="both";
                son.style.float="right";
                son.style.marginRight="5px";
                son.innerText=txt.value;
                father.appendChild(son);
               // txt.value="";
                son.scrollIntoView();


                var xmlHttp = null;
                try {
                    xmlHttp = new XMLHttpRequest();
                } catch (e) {
                    try {
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }

                //post
                xmlHttp.open('POST','http://localhost:8080/demotest',true)
                xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                var data = 'question='+txt.value
                console.log(txt.value)
                xmlHttp.send(data)

                //获取后端响应数据
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState === 4&&xmlHttp.status ===200){ //请求成功
                        //接收后端发过来的问题答案
                        console.log(xmlHttp.responseText)
                        //提问框清空
                        txt.value = ""

                        //创建回答对话框
                        var son2 = document.createElement("p");
                        son2.style.backgroundColor="#f3f3f3";
                        son2.style.clear="both";
                        son2.style.float="left";
                        son2.style.marginRight="5px";
                        son2.innerText=xmlHttp.responseText;
                        father.appendChild(son2);
                        son.scrollIntoView();
                    }
                    if(xmlHttp.status !==200){ //请求失败
                        //创建回答对话框
                        var son2 = document.createElement("p");
                        son2.style.backgroundColor="#f3f3f3";
                        son2.style.clear="both";
                        son2.style.float="left";
                        son2.style.marginRight="5px";
                        son2.innerText="服务器开了点小差，小元正在修复~";
                        father.appendChild(son2);
                        son.scrollIntoView();
                    }
                }
            }
        }
    }
</script>
